<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础知识</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../../static/css/public.css" />
</head>
<body>
	<!--右边内容-->
	<div id="app" class="main animated fadeInRight">
		<div class="shadow">
			<div>
				<h4>JQ选择器</h4>
				<pre>
	$("li")		jQuery("#id")
				
	访问特定的下标,返回一个JQ对象
	$("li").eq(3)
	$("li:eq(3)")
	将JQ对象转化为原生JS对象
	$("li")[3]
	$("li:first")
	$("li").filter(":first")	//推荐使用此方法
	
	传单个值
	$("li").filter(":odd").css("background","pink")
	
	改变多个值
	var obj = {"fontSize":30,"color":"red","fontWeight":"bold"}
	$("li").filter(":odd").css(obj);//链式写法JQ提倡的写法
	
	注册DOM事件
	$("li").click(function(){
		alert($(this).index())
	})
	
	find()方法
	$(".li").find("span") 	等价=> $(".baba span")
	$(".li").find(">span")	等价=> $(".baba>span")
				</pre>
			</div>
			<div>
				<h4>一次性事件</h4>
				<pre>
	推荐使用"on"方法,可以绑定多种事件类型
	$("li").on("click mouseup",function(event){
		alert($(this).index())
		//移除事件 off
		$(this).off(event)
	})			
		
	一次性事件,等价下面的
	$("li").one("click mouseup",function(event){
		alert($(this).index());
	})	
				</pre>
			</div>
			<div>
				<h4>JQ选项卡</h4>
				<pre>
	$(this)	访问当前元素
	.siblings() 访问当前兄弟元素
	对类名进行增删查改
	addClass()   添加			
	removeClass()	移除
	hasClass()    有没有
	toggleClass()    有责删,没有就加
		
	$("li").on("click",function(){
		1.当前元素添加active类名
		2.兄弟元素移除active类名				
		当前元素.添加active类名.兄弟元素.移除active类名
		var i = $(this).index(); //寻找出点击下标
		1、$(".news").eq(i).addClass("show").siblings(".news").removeClass("show");
		 //.siblings(".news") 加入参数是为了更精确的查找同级，
		2、$(this).addClass("active").siblings().removeClass("active")
		3、$(".news")[i].addClass("show").siblings().removeClass("show")
	})				
				</pre>
			</div>
			<div>
				<h4>当$符号被其他插件版本占用</h4>
				<pre>
	$=document;
	当$符号被其他插件版本占用时,noConflict 解决$占用的情况
	_=jQuery.noConflict();
	_取代$使用jQuery对象,关于JQ,JS放在头部的写法,当DOM文档渲染完成时,执行的回调函数
	
	JQ推荐写法
	_(function(){
		console.log($(".class"));
	})
	等价下面方法
	_().ready(function(){
		console.log(_("#id"));
	})
	
	原生JS写法
	document.addEventListener("DOMContentLoaded",function(){
		console.log(".class")
	})
				</pre>
			</div>
		</div>
	</div>
	<!--页面加载进度条-->
	<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
</body>

</html>